<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>甄荣康的个人简历</title>

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="description" content="Personal Website Template">
  <meta name="keywords" content="Personal, Website Template, Minimal HTML Template, Freelancer">
  <meta name="author" content="khai tawng">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="images/favicon.ico" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"
    integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <!-- Main css -->
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>

<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">

  <!-- PRE LOADER -->
  <div class="preloader">
    <div class="spinner">
      <span class="spinner-rotate"></span>
    </div>
  </div>

  <!-- NAVIGATION SECTION -->
  <div class="navbar custom-navbar navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand">
          <img data-original="images/logo.png" class="lazy" alt="" srcset=""> Dodoing</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon icon-bar"></span>
          <span class="icon icon-bar"></span>
          <span class="icon icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a class="smoothScroll" href="#home">个人简介 </a>
          </li>
          <li>
            <a class="smoothScroll" href="#about">关于我 </a>
          </li>
          <li>
            <a class="smoothScroll" href="#skill">擅长技术 </a>
          </li>
          <li>
            <a class="smoothScroll" href="#work">作品展示 </a>
          </li>
          <li>
            <a class="smoothScroll" href="#project">成长经历 </a>
          </li>
          <li>
            <a class="smoothScroll" href="#contant-anchor">联系方式 </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <canvas id="Mycanvas" style="position: fixed;z-index: -1"></canvas>

  <!-- HOME SECTION -->
  <section id="home">

    <div class="container">
      <div class="row">

        <div class="col-md-offset-2 col-md-2 col-sm-3">
          <img data-original="images/profile-image.jpg" class="lazy wow fadeInUp img-responsive img-circle"
            data-wow-delay="0.1s" alt="about image">
        </div>

        <div class="col-md-6 col-sm-6">
          <h1 class="wow fadeInUp" data-wow-delay="0.2s">Hey 您好,我叫甄荣康
            <br>致力于编织一切有艺术感的事物
          </h1>
          <h4 class="text-right wow fadeInRight" data-wow-delay="0.4s">-- 志于道，据于德，依于仁，游于艺</h4>
          <ul class="list-unstyled wow fadeInUp fa-ul" data-wow-delay="0.5s">
            <li>
              <p>
                <span class="fa-li">
                  <i class="fas fa-cog"></i>
                </span>专业: 平面设计/艺术设计(本科)
              </p>
            </li>
            <li>
              <p>
                <span class="fa-li">
                  <i class="fas fa-envelope"></i>
                </span>Email: zhenrongkang@hotmail.com
              </p>
            </li>
            <li>
              <p>
                <span class="fa-li">
                  <i class="fas fa-phone"></i>
                </span>电话: 13570641739
              </p>
            </li>
            <li>
              <p>
                <span class="fa-li">
                  <i class="fas fa-map-marker-alt"></i>
                </span>坐标: 广东-珠海
              </p>
            </li>
            <li>
              <p>
                <span class="fa-li">
                  <i class="fas fa-briefcase"></i>
                </span>求职意向: web前端开发工程师
              </p>
            </li>
          </ul>
          <a href="images/resume_pdf.pdf" download="甄荣康的个人简历" target="_blank"
            class="wow fadeInUp btn btn-default section-btn">下载简历</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ABOUT SECTION -->
  <section id="about">
    <div class="container">
      <div class="row">

        <div class="col-md-8 col-sm-12">
          <div class="about-thumb">
            <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
              <h2>关于我</h2>
            </div>
            <div class="wow fadeInUp" data-wow-delay="0.3s">
              <p>
                平面设计专业2014年毕业，由于毕业设计选择了网页设计，从此对web前端产生了浓厚兴趣，所以开始自学前端。前端技术每天突飞猛进，这是每一个走在前端路上的朋友的挑战也是机遇，正是这样，我热爱学习尝试新鲜的事物，在这个过程中，我总会收获很多。
              </p>
              <p>拥有良好的色彩搭配基础，独立的审美观，有效成为UI、产品、技术之间的沟通桥梁。并对视觉设计图进行像素级还原。</p>
              <p>高效的自学能力，务实进取，有较强的责任心和团队合作精神。</p>
              <p>拥有互联网金融、购物商城、智慧园区等多方面前端开发和网页设计经验。</p>
              <p>为人诚恳，热心友善，乐于助人。</p>
            </div>
            <!-- <ul class="social-icon">
              <li class="wow fadeInLeft" data-wow-delay="1s">
                    <a href="#" class="fa fa-twitter"></a>
              </li>
              <li class="wow fadeInUp" data-wow-delay="1.2s">
                    <a href="#" class="fa fa-linkedin"></a>
              </li>
              <li class="wow fadeInRight" data-wow-delay="1.4s">
                    <a href="#" class="fa fa-dribbble"></a>
              </li>
            </ul> -->
          </div>
        </div>

        <div class="col-md-4 col-sm-12">
          <div class="wow fadeInUp" data-wow-delay="0.5s">
            <h2>爱好</h2>
          </div>

          <div class="wow fadeIn" data-wow-delay="0.6s">
            <a>
              <img data-original="images/instagram-image1.jpg" class="img-responsive lazy" alt="instagram image">
            </a>

            <a>
              <img data-original="images/instagram-image2.jpg" class="img-responsive lazy" alt="instagram image">
            </a>

            <a>
              <img data-original="images/instagram-image3.jpg" class="img-responsive lazy" alt="instagram image">
            </a>

            <a>
              <img data-original="images/instagram-image4.jpg" class="img-responsive lazy" alt="instagram image">
            </a>

            <a>
              <img data-original="images/instagram-image5.jpg" class="img-responsive lazy" alt="instagram image">
            </a>
            <a>
              <img data-original="images/instagram-image6.jpg" class="img-responsive lazy" alt="instagram image">
            </a>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- SKILL SECTION -->
  <section id="skill">
    <div class="container">
      <div class="row">

        <div class="col-md-6 col-sm-6">
          <div class="wow fadeInUp section-title" data-wow-delay="0.5s">
            <h2>擅长技术</h2>
            <p>对W3C标准和浏览器兼容性有良好认识，熟练运用HTML，了解HTML5新特性，熟练运用CSS，熟悉CSS3新特性(动画，弹性布局，媒体查询等)，熟悉css预编译器Less。</p>
            <p>熟练运用Javascript，熟悉ES6语法特性，能熟练运用jQuery，了解Nodejs。</p>
            <p>熟悉Bootstrap、MUI、layui、HUI等前端UI库和图标库。</p>
            <p>掌握Vue.js，了解npm、Gulp、Webpack等搭建前端工作流。</p>
            <p>有Centos搭建个人站点,爬虫等项目经验。</p>
          </div>
        </div>

        <div class="col-md-6 col-sm-6">
          <div class="skill-thumb">

            <div x-data="skillData()">
              <template x-for="(item,index) in items" :key="index">
                <div class="wow fadeInUp" :data-wow-delay="item.delay+'s'">
                  <strong x-text="item.name"> </strong>
                  <span class="pull-right" x-text="item.val+'%'"></span>
                  <div class="progress">
                    <div class="progress-bar progress-bar-primary" role="progressbar" :aria-valuenow="item.val"
                      aria-valuemin="0" aria-valuemax="100" :style="'width:'+item.val+'%'"></div>
                  </div>
                </div>
              </template>
            </div>

          </div>
        </div>

      </div>
    </div>
  </section>



  <!-- project SECTION -->
  <section id="project">
    <div class="container">
      <div class="row">

        <div class="col-md-12 col-sm-12">
          <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
            <h2>项目经历</h2>
          </div>
        </div>

        <div class="col-md-12 col-sm-12">
          <section id="cd-timeline" x-data="projectData()" class="wow fadeInUp cd-container" data-wow-delay="0.2s">

            <template x-for="(item,index) in items" :key="index">
              <div class="cd-timeline-block">
                <div class="cd-timeline-img"></div>
                <div class="cd-timeline-content">
                  <h2>
                    <span x-text="item.name"></span>
                    <template x-if="item.href">
                      <a target="_blank" :href="item.href">
                        <i class="fas fa-link icon"></i>项目链接</a>
                    </template>
                  </h2>
                  <div class="row">
                    <div class="col-xs-12">
                      <a :href="item.img" class="project-popup">
                        <img :src="item.img" class="lazy img-responsive" alt="Work">
                      </a>
                    </div>
                  </div>
                  <p x-text="item.work"></p>
                  <span class="cd-date" x-text="item.date"></span>
                </div>
              </div>
            </template>

            <!--
            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>二元期权网站</h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/project/option.jpg" class="project-popup">
                      <img data-original="images/project/option.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>
                </div>
                <p>负责页面UI，交互逻辑设计，前端页面HTML,CSS,JS实现。</p>
                <span class="cd-date">2014-12</span>
              </div>
            </div>
            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>潮流生活百货购物网/手机端
                  <a target="_blank" href="http://www.icmarts.com/">
                    <i class="fas fa-link icon"></i>项目链接</a>
                </h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/work/icmarts.jpg" class="project-popup">
                      <img data-original="images/work/icmarts.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>
                </div>
                <p>负责网页设计，前端页面实现。与php完成数据展示，兼容主流浏览器。/负责手机UI，交互逻辑设计，使用了MUI框架。</p>
                <span class="cd-date">2015-05</span>
              </div>
            </div>
            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>汇金达人wisgon
                  <a target="_blank" href="http://www.wisgon.com/">
                    <i class="fas fa-link icon"></i>项目链接</a>
                </h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/project/wisgon.jpg" class="project-popup">
                      <img data-original="images/project/wisgon.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>
                </div>
                <p>负责网页设计，前端页面实现。使用了js表单排序,固定表头等技术。</p>
                <span class="cd-date">2016-06</span>
              </div>
            </div>
            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>新版Glory Sky响应式网站
                  <a target="_blank" href="https://www.gloryskyglobal.com.au/?l=zh-hk">
                    <i class="fas fa-link icon"></i>项目链接</a>
                </h2>
                <div class="row">

                  <div class="col-xs-12">
                    <a href="images/work/GlorySky.jpg" class="project-popup">
                      <img data-original="images/work/GlorySky.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>
                </div>
                <p>负责网页设计，前端页面实现。运用了bootstrap框架，兼容了不同设备的浏览体验。</p>
                <span class="cd-date">2017-04</span>
              </div>
            </div>
            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>港澳楼宇租售响应式网站
                </h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/work/house.jpg" class="project-popup">
                      <img data-original="images/work/house.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>
                </div>
                <p>负责网页设计，前端页面实现，使用了bootstrap框架，animate动画。</p>
                <span class="cd-date">2017-05</span>
              </div>
            </div>

            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>新版webPos管理系统</h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/project/webpos.jpg" class="project-popup">
                      <img data-original="images/project/webpos.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>

                </div>
                <p>使用了Vue框架，负责编写部分组件，使用了表单固定表头和滚动加载技术。</p>
                <span class="cd-date">2018-01</span>
              </div>
            </div>

            <div class="cd-timeline-block">
              <div class="cd-timeline-img"></div>
              <div class="cd-timeline-content">
                <h2>新版webPos管理系统</h2>
                <div class="row">
                  <div class="col-xs-12">
                    <a href="images/project/webpos.jpg" class="project-popup">
                      <img data-original="images/project/webpos.jpg" class="lazy img-responsive" alt="Work">
                    </a>
                  </div>

                </div>
                <p>使用了Vue框架，负责编写部分组件，使用了表单固定表头和滚动加载技术。</p>
                <span class="cd-date">2018-01</span>
              </div>
            </div> -->
          </section>
        </div>
      </div>
    </div>
  </section>

  <!-- WORK SECTION -->
  <section id="work">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12">
          <div class="wow fadeInUp" data-wow-delay="0.2s">
            <h2>设计作品展示</h2>
          </div>
        </div>
        <div class="gallery wow fadeIn" data-wow-delay="0.5s">
          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/activity.jpg" class="image-popup">
                <img data-original="images/work/activity.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>活动专题页设计</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/icmarts.jpg" class="image-popup">
                <img data-original="images/work/icmarts.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>电商购物网站</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/GlorySky.jpg" class="image-popup">
                <img data-original="images/work/GlorySky.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>响应式官网设计</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/wisgon.jpg" class="image-popup">
                <img data-original="images/work/wisgon.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>汇金达人网站</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/house.jpg" class="image-popup">
                <img data-original="images/work/house.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>响应式楼宇租售网</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/option.jpg" class="image-popup">
                <img data-original="images/work/option.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>在线交易系统</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/work_6.jpg" class="image-popup">
                <img data-original="images/work/work_6.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>名片与购物网站</h4>
          </div>
          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/bag.jpg" class="image-popup">
                <img data-original="images/work/bag.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>环保纸袋设计</h4>
          </div>
          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/menu.jpg" class="image-popup">
                <img data-original="images/work/menu.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>折页传单设计</h4>
          </div>
          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/magazine.jpg" class="image-popup">
                <img data-original="images/work/magazine.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>护肤品杂志设计</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/bannerdes.jpg" class="image-popup">
                <img data-original="images/work/bannerdes.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>banner海报设计</h4>
          </div>

          <div class="col-md-3 col-sm-4 col-xs-6">
            <!-- WORK THUMB -->
            <div class="work-thumb">
              <a href="images/work/logos.jpg" class="image-popup">
                <img data-original="images/work/logos.jpg" class="lazy img-responsive" alt="Work">
              </a>
            </div>
            <h4>LOGO设计</h4>
          </div>

        </div>
      </div>
    </div>
  </section>

  <!-- contact SECTION -->
  <section id="contact">
    <div class="container">
      <div class="row">
        <div class="contact col-md-12 col-sm-12">
          <h2>Thanks</h2>
          <p>喜欢就把我收到碗里吧 =￣ω￣=</p>
          <p>Email:
            <a href="mailto:zhenrongkang@hotmail.com" target="_blank">zhenrongkang@hotmail.com</a>
          </p>
          <p>QQ:
            <a href="http://wpa.qq.com/msgrd?v=3&uin=751276089&site=qq&menu=yes" target="_blank">751276089</a>
          </p>
          <p class="qr-link">手机/微信:
            <a href="Javascript:;">13570641739</a>
            <span class="qr-box">
              <img src="images/1522641302.png" class="img-responsive" alt="" srcset="">
            </span>
          </p>
        </div>
      </div>
    </div>
  </section>
  <span id="contant-anchor"></span>

  <!-- SCRIPTS -->
  <script src="js/jquery.js"></script>
  <script src="js/jquery.lazyload.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/smoothscroll.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/magnific-popup-options.js"></script>
  <script src="js/wow.min.js"></script>
  <script src="js/custom.js"></script>
  <script>

    function skillData() {
      return {
        items: [
          {
            name: 'HTML',
            val: 90,
            delay: '0.5',
          },
          {
            name: 'CSS / Less',
            delay: '0.6',
            val: 90
          },
          {
            name: 'Javascript / jQuery / NodeJS',
            delay: '0.7',
            val: 70
          },
          {
            name: 'Bootstrap / Layui / Uniapp',
            delay: '0.8',
            val: 75
          },
          {
            name: 'Element-UI / Ant-Design-Vue',
            delay: '0.9',
            val: 70
          },
        ]
      }
    }

    function projectData() {
      return {
        items: [
          {
            name: '二元期权网站',
            img: 'images/project/option.jpg',
            work: '负责页面UI，交互逻辑设计，前端页面HTML,CSS,JS实现。',
            date: '2014-12',
          },
          {
            name: '潮流生活百货购物网/手机端',
            img: 'images/work/icmarts.jpg',
            work: '负责网页设计，前端页面实现。与php完成数据展示，兼容主流浏览器。/负责手机UI，交互逻辑设计，使用了MUI框架。',
            date: '2015-05',
            href:"http://www.icmarts.com/"
          },
          {
            name: '汇金达人wisgon',
            img: 'images/work/wisgon.jpg',
            work: '负责网页设计，前端页面实现。使用了js表单排序,固定表头等技术。',
            date: '2016-06',
            href:"http://www.wisgon.com/"
          },
          {
            name: '新版Glory Sky响应式网站',
            img: 'images/work/icmarts.jpg',
            work: '负责网页设计，前端页面实现。运用了bootstrap框架，兼容了不同设备的浏览体验。',
            date: '2017-04',
            href:"https://www.gloryskyglobal.com.au/?l=zh-hk"
          },
          {
            name: '港澳楼宇租售响应式网站',
            img: 'images/work/house.jpg',
            work: '负责网页设计，前端页面实现，使用了bootstrap框架，animate动画。',
            date: '2017-05',
          },
          {
            name: '新版webPos管理系统',
            img: 'images/project/webpos.jpg',
            work: '使用了Vue框架，负责编写部分组件，使用了表单固定表头和滚动加载技术。',
            date: '2018-01',
          },
          {
            name: '珠海机场协同运作管理系统',
            img: 'images/project/zhjc.png',
            work: '整体使用Layui框架，使用类excel表格控件handsomtable实现航班动态数据表，即时通讯工具达到了机场各部门间的协同运作。并完成各类可视化数据大屏。',
            date: '2018-10',
          },
          {
            name: '珠海机场应急指挥调度系统',
            img: 'images/project/yingji.png',
            work: '负责网页UI设计和前端页面实现，使用了antdv框架。实现机场应急资源信息整合，改进应急处置方式，完善应急处置流程。',
            date: '2020-03',
          },
        ]
      }
    }
  </script>
</body>

</html>